<!--
 * @Author: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @Date: 2022-05-26 19:50:25
 * @LastEditors: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @LastEditTime: 2022-05-30 21:14:26
 * @FilePath: \vue-2202\src\views\photos\photilist\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="photolist">
    <van-tabs>
      <van-tab v-for="v in photoList" :key="v.id">
        <template #title
          ><span @click="getImages(v.id)">{{ v.title }}</span></template
        >
        <div class="imgs-box" v-if="imagesList.length > 0">
          <img
            v-lazy="v.img_url"
            alt=""
            v-for="v in imagesList"
            :key="v.id"
            @click="goDetail('/home/photoinfo', v.id)"
          />
        </div>
        <div v-else>图片蒲海涛这只狗偷了</div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { photoList } from "@/api";
import { getImages } from "@/api";
export default {
  data() {
    return { photoList: [], imagesList: [] };
  },
  methods: {
    async getPhotoList() {
      const res = await photoList();
      res.data.message.unshift({
        id: 0,
        title: "全部",
      });
      this.photoList = res.data.message;
    },
    async getImages(id) {
      const res = await getImages(id);
      this.imagesList = res.data.message;
    },
  },
  created() {
    this.getPhotoList();
    this.getImages(0);
  },
};
</script>
<style lang="scss" scoped>
.photolist {
  width: 100%;
  overflow: hidden;
}
.imgs-box {
  width: 100%;
  //   overflow: hidden;
  img {
    width: 100%;
    display: block;
    height: 100%;
  }
}
</style>
